<template>
	<div>
		<home-header	></home-header>
		<home-swiper :list='swiperList'></home-swiper>
		<home-icons :list = 'iconList'></home-icons>
		<recommend :list='recommendList'></recommend>
		<weekend :list="weekendList"></weekend>
	</div>
</template>

<script>
import HomeHeader from './components/header'
import HomeSwiper from './components/Swiper'
import HomeIcons from './components/icons'
import Recommend from './components/Recommend'
import Weekend from './components/Weekend'

import {mapState} from 'vuex'
//引入ajax 请求
import axios from 'axios'
export default {
	name:'home',
	components:{
		HomeHeader:HomeHeader,
		HomeSwiper:HomeSwiper,
		HomeIcons:HomeIcons,
		Recommend:Recommend,
		Weekend
	},
	data(){
		return {
			swiperList:[],
			iconList:[],
			recommendList:[],
			weekendList:[],
			lastCity:''
		}
	},
	computed:{
		...mapState(['city'])
	},
	methods:{
		getHomeInfo(){
			axios.get('/api/index.json?city=' + this.city)
				.then(this.getHomeInfoSucc)
		},
		getHomeInfoSucc(res){
			console.log(res)
			const response = res.data
			if(response.ret && response.data){
				const data = response.data 
				this.swiperList = data.swiperList
				this.iconList = data.iconList
				this.recommendList = data.recommendList
				this.weekendList = data.weekendList
				console.log(this.iconList)
			}
		}
	},
//	周期函数,钩子
	mounted(){
		this.getHomeInfo()
		this.lastCity = this.city
	},
	activated(){
//		keep-alive 中的钩子函数 页面重新显示的时候，会执行该函数
		 console.log('activated')
		 if (this.lastCity !== this.city ){
		 	this.getHomeInfo()
		 	this.lastCity = this.city
		 }
		 
	}
}
</script>

<style>

</style>